<template>
  <div class='container'>
    <div class='left'>
      <div class='left-top'>
        <div class='img'>
          <img :src='this.$store.state.mymusic.likemusic.coverImgUrl' alt=''>
        </div>
        <div class='end'>
          <div class='title'>
            <i></i>
            <div class='tit'>
              <h2>
                我喜欢的音乐
              </h2>
            </div>
          </div>
          <div class='user'>
            <a href='' class='userpic'>
              <img :src='$store.state.user.avatarUrl' alt=''>
            </a>
            <span class='username'>
              <a href=''>
                {{$store.state.user.username }}
              </a>
              <img class='vip' alt=''>
          </span>

            <span class='time'>&nbsp;{{ geitime }} &nbsp;创建</span>
          </div>
          <div class='play'>
            <a href='' class='music-play'>
              <i>
                <em></em>
                播放
              </i>
            </a>
            <a href='' class='add'></a>
            <a href='' class='store'>
              <i>({{ msg.bookedCount }})</i>
            </a>
            <a href='' class='send'>
              <i>({{ msg.shareCount }})</i>
            </a>
            <a href='' class='send'>
              <i class='download '>下载</i>
            </a>
            <a href='' class='send'>
              <i class='msg'>({{ msg.commentCount }})</i>
            </a>
          </div>
        </div>
      </div>
      <div class='contentsong'>
        <div class='list'>
          <h3 style='text-indent: 2rem'>
            歌曲列表
            <span>{{ this.$store.state.mymusic.likemusic.trackCount }}首歌</span>
          </h3>
          <span style='margin-right: 30px'>
              播放:
              <a href=''>{{ this.$store.state.mymusic.likemusic.playCount }}次</a>
            </span>
        </div>
        <div class='songtable'>
          <table>
            <thead>
            <tr>
              <th class='first'></th>
              <th class='title'>
                <div>
                  歌曲标题
                </div>
              </th>
              <th class='time'>
                <div>时长</div>
              </th>
              <th class='songer'>
                <div>歌手</div>
              </th>
              <th class='album'>
                <div>专辑</div>
              </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for='(item,index) in list' :key="index"> 
              <td class='table-left'>
                <span style='color: #999;'>{{ index + 1 }}</span>
                <span @click='getid(item.id,item.name,item)' class='table-play'></span>
                <!--                <span style='background-position: -20px -128px;' class='table-play'></span>-->
              </td>
              <td>
                <div class='songss'>
                  <a href='javascript:;'>{{ item.name }}</a>
                  <!--                                     <span class='songcolor'>-({{item.alias}})</span>-->
                </div>
              </td>
              <td>
                {{time[index]}}
              </td>
              <td>             <a class='name' href='javascript:;'>
                {{ item.artists[0].name }}
                <span v-if='item.artists.length === 2'>
               {{ item.artists[1].name }}
              </span>
              </a></td>
              <td></td>
            </tr>
            </tbody>
          </table>
        </div>

      </div>
      <div class='left-footer'>
        <div class='list'>
          <h3>
            评论
            <span>共{{ total }}条评论</span>
          </h3>
        </div>
        <div class='comments'>
          <div class='userimg'>
            <img v-if='!this.$store.state.user.show' width='50' height='50'
                 :src='this.$store.state.user.avatarUrl' alt=''>
            <img v-else width='50' height='50'
                 src='' alt=''>
          </div>
          <div class='input'>
            <textarea placeholder='评论' name='' id='' value='评论' cols='30' rows='10'></textarea>
            <div class='inputicon'>
              <div>
                <a href=''></a>
                <a href=''></a>
              </div>
              <button>评论</button>
            </div>
          </div>
        </div>
        <div class='usercommts'>
          <div class='goodcommts'>
            <h4>最新评论</h4>
          </div>

          <ul class='userhot'>
            <li v-for='(item,index) in hotuser'>
              <div class='comm-left'>
                <a href=''>
                  <img width='50' height='50' :src='item.user.avatarUrl' alt=''>
                </a>
              </div>
              <div class='comm-right'>
                <div class='comm-righttop'>
                  <a href=''>{{ item.user.nickname }}:</a>
                  <span>{{ item.content }}</span>
                </div>
                <div class='comm-bottommsg'>
                  <div class='usertime' style='color: #999'>
                    {{ }}
                  </div>
                  <div class='userset'>
                    <a href=''></a>
                    <span v-if='item.likedCount !==0'>({{ item.likedCount }})</span>
                    <b>|</b>
                    回复
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import config from '@/network/config'
import moment from 'moment'
import {mapState} from 'vuex'
export default {
  name: 'LickMusic',
  data() {
    return {
      url: config.url,
      list: [],
      time: [],//音乐时间
      msg:[],//点击量
      hotuser:[],//评论
      total:'',
      usertime:[],
    }
  },
  methods: {
    //点击量
    getmessage() {
      axios.get(`${this.url}/playlist/detail/dynamic?`, {
        params: {
          id: this.$route.params.id
        }
      }).then(res => {
        this.msg = res.data
      })
    },
    commenton() {
      axios.get(`${this.url}/comment/playlist?`, {
        params: {
          id: this.$route.params.id
        }
      }).then(res => {
        // console.log(res.data)
        this.total = res.data.total
        var list = []
        this.hotuser = res.data.comments
        res.data.comments.forEach(item => {
          list.push(item.time)
        })
        for (let i = 0; i < list.length; i++) {
          this.usertime.push((moment(list[i]).format('YYYY-MM-DD HH:mm')))
        }
      })
    },
    getid(id,name,item) {  //获取歌曲di 传递到video 进行播放

    axios.get(`${this.url}/cloudsearch?keywords=${id}`).then(res => {
      this.$store.commit('song/getpic',res.data.result.songs[0].al.picUrl)   //把图片地址存到 x
    })






      axios.get(`${this.url}/song/url?`,{
        params:{
          id
        }
      }).then(res => {
        var url = res.data.data[0].url
        this.$store.commit('song/getsong',url);
        this.$store.state['song/name'] = name;
      })
    },
    async getdata() {
      var list = []
      var data = await axios.get(`${this.url}/likelist?uid=${this.$route.params.id}`, {
        withCredentials: true
      }) //返回 歌曲id数组 只能无法一次性获取所有歌曲信息
      list = data.data.ids
      list.forEach(item => {
        axios.get(`${this.url}/search?keywords=${item}`).then(res => {
          this.list.push(res.data.result.songs[0])
          this.time.push(moment(res.data.result.songs[0].duration).format('mm:ss'))
        })
      })

    }//获取喜欢的歌曲 一组

  },
  computed: {
    //创建时间
    geitime() {
      return moment(this.$store.state.mymusic.likemusic.createTime).format('YYYY-MM-DD')
    },
  },
  created() {
    // console.log(moment(1615010526714).format('YYYY-MM-DD'))
    // console.log(this.$store.state.mymusic.likemusic.createTime)
  },
  mounted() {
    this.getdata()
    this.getmessage()
    this.commenton()
  },
  updated() {

  }
}
</script>

<style scoped>

.left li:last-child {
  border-bottom: none;
  margin-bottom: 10px;
}

.recontent a, span {
  text-wrap: normal;
}

.recontent span {
  color: #999;
  font-size: 12px;
}

.recontent a {
  color: #666;
}

.recontent {
  overflow: hidden;
  text-overflow: ellipsis;
}

.recontent > a {
  font-size: 14px;
  color: #000000;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;

}

.recontent {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.recommend .userimg {
  margin-top: 10px;
  margin-right: 10px;
}

.recommend ul li {
  display: flex;
}

.recommend {
  width: 200px;

}

.right .header {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  justify-content: space-evenly;
  margin-top: 10px;

}

.right .header li {
  width: 40px;
  height: 40px;
  padding-right: 10px;
  padding-top: 10px;
}

.right h3 {
  height: 23px;
  border-bottom: 1px solid #ccc;
  color: #333;
  font-size: 12px;
  font-weight: lighter;
  width: 200px;
  padding: 12px 0 12px 0;
  margin-bottom: 5px;
}

.right {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userset a {
  color: #999;
  display: inline-block;
  width: 15px;
  height: 14px;
  margin-right: 10px;
  background: url("../../../../assets/images/icon2.png") -150px 0;

}

.userset b {
  color: #999;
  margin: 0 5px;
}

.userset {
  position: absolute;
  right: 0;
  display: flex;
  bottom: 0;
  align-items: center;
}

.comm-bottommsg {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.comm-right span {
  font-size: 12px;
}

.comm-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 10px;
  width: 100%;
  overflow: hidden;
}

.userhot > li {
  display: flex;
  margin-top: 10px;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 10px;
  font-size: 12px;
}

/*精彩评论*/
.usercommts {
  width: 650px;
}

.usercommts h4 {
  font-size: 12px;
  font-weight: lighter;
  height: 20px;
  border-bottom: 1px solid #cfcfcf;
}

/*精彩评论*/
.inputicon a:nth-child(1) {
  width: 18px;
  height: 18px;
  background-position: -40px -490px;
  margin-right: 10px;

}

.inputicon a:nth-child(2) {
  width: 18px;
  height: 18px;
  background-position: -60px -490px;
}

.inputicon a {
  display: block;
  background: url("../../../../assets/images/icon.png");
  width: 18px;
}

.inputicon {
  height: 18px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;

}

.inputicon button:hover {
  background-position: -84px -94px;
  color: #fff;
  text-decoration: none;
}

.inputicon button {
  background: url("../../../../assets/images/button.png") -84px -64px;
  width: 46px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  font-size: 12px;
  border: none;
  outline: none;
  color: white;
}

.inputicon > div {
  display: flex;
}

.comments textarea {
  resize: none;
  outline: none;
  width: 578px;
  height: 63px;
  border: 1px solid #ccc;
}

.comments {
  display: flex;
  position: relative;

}

/*品论部分*/
.userimg {
  margin-right: 20px;
}

/*用户头像*/
.left-footer .list {
  display: flex;
  align-items: center;
  height: 33px;
  border-bottom: 2px solid #c20c0c;
  justify-content: space-between;
  margin-right: 30px;
  margin-bottom: 20px;
}

.left-footer {
  margin-left: 30px;
}

.more a {
  margin-top: 10px;
  width: 120px;
  height: 30px;
  background-image: linear-gradient(
    90deg, #ff5a4c 0%, #ff1d12 100%);
  border-radius: 18px;
  line-height: 30px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
}

.more p {
  font-size: 13px;
  color: #333333;
}

.more {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-bottom: 30px;
}

/*更多内容*/
tbody tr:nth-child(odd) {
  background: #F7F7F7;
}

.songss {
  width: 100%;
  height: 30px !important;
  display: flex;
  align-items: center;
}

.songss a {
  display: block;
  white-space: nowrap;

}

td a:hover {
  text-decoration: underline;
}

td {
  overflow: hidden;
  height: 30px !important;
  white-space: nowrap;
}

/* 表格信息*/
table .first {
  width: 74px;
}

.table-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

td .table-play:hover {
  background-position: 0 -128px;
}

td .table-play {
  background: url("../../../../assets/images/table.png") 0 -103px;
  width: 17px;
  height: 17px;
}

table td {
  padding: 6px 10px;
  line-height: 18px;
  text-align: left;
}

th > div {
  background: url("../../../../assets/images/table.png") 0 -56px no-repeat;
  padding: 8px 10px;
  font-weight: normal;
  color: #666;
}

table .title {
  width: 237px;
}

table th {
  height: 38px;
  color: #666;
  font-size: 12px;
  text-align: left;
  background: url("../../../../assets/images/table.png") 0 0;
}

.songtable table {
  width: 650px;
  border: 1px solid #d9d9d9;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12px;
}

/*表格*/
.list span {
  font-size: 12px;
  color: #666666;
}

.list span a {
  font-size: 12px;
  color: #c20c0c;
}

.list h3 span {
  margin: 9px 0 0 5px;
  color: #666;
  font-size: .5rem;
}

.list h3 {
  font-size: 20px;
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
  font-weight: normal;
}

.contentsong .list {
  display: flex;
  align-items: center;
  height: 33px;
  border-bottom: 2px solid #c20c0c;
  justify-content: space-between;
  width: 96.4%
}

.contentsong {
  margin-top: 27px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
table{
  width: 96.4% !important;
  z-index: 10;
}

/*歌曲部分*/
.end .message {
  margin-top: 4px;
  line-height: 18px;
  color: #666;
  font-size: 12px;
}

/*介绍*/
.end .tip i {
  background: url("../../../../assets/images/button2.png") 0 0;
  float: left;
  height: 22px;
  line-height: 22px;
  position: relative;
  zoom: 1;
  padding: 0 3px 0 13px;
  cursor: pointer;
  font-style: normal;
  font-weight: lighter;
}

.end .tip a {
  background: url("../../../../assets/images/button2.png") right -27px;
  margin: 0px 10px 3px 0;
  padding: 0 10px 0 0;
  text-shadow: 0 1px #fdfdfd;
  color: #777;
  text-decoration: none;
  cursor: pointer;
}

.end .tip {
  margin: 25px 0 5px;
  line-height: 22px;
  display: flex;
  align-items: center;
}

.end .tip b {
  float: left;
  font-weight: normal;
  color: #666;
  font-size: 12px;
  margin-top: -5px;
}

/*标签*/
.send .msg {
  background-position: 0 -1465px !important;
}

.send .download {
  background-position: 0 -2761px !important;
}

.send i {
  height: 31px;
  min-width: 37px !important;
  cursor: pointer;
  background-position: 0 -1225px !important;
  color: #666666 !important;
  padding-left: 22px;
  text-align: center;
}

.send {
  background-position: right -1020px !important;
  margin-right: 6px;
  padding: 0 5px 0 0;
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 58px;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 3px;
}

/*转发*/
.play .store i {
  background-position: 0 -977px;
  padding-right: 2px;
  padding-left: 28px;
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  cursor: pointer;
  color: #333;

}

i {
  background: url("../../../../assets/images/button2.png");
  color: #333;
  float: left;
  line-height: 30px;
  cursor: pointer;
  width: auto;
}

.play .store {
  margin-right: 6px;
  font-family: simsun, \5b8b\4f53;
  background-position: right -1020px;
  padding: 0 5px 0 0;
  white-space: nowrap;
  color: #333;
  text-decoration: none;
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  cursor: pointer;
}

/*收藏*/
.play .add {
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  cursor: pointer;
  padding: 0 5px 0 0;
  white-space: nowrap;
  color: #333;
  text-decoration: none;
  width: 31px;
  margin-left: -3px;
  background-position: 0 -1588px;
  font-family: simsun, \5b8b\4f53;
  margin-right: 5px;
}

/* 加号*/
.play em {
  background: url("../../../../assets/images/button2.png") 0 -1622px;
  float: left;
  width: 20px;
  height: 18px;
  margin: 6px 0px 2px 0;
  overflow: hidden;
  font-style: normal;
  text-align: left;
  font-size: inherit;
}

.play i {
  background: url("../../../../assets/images/button2.png");
  float: left;
  overflow: hidden;
  cursor: pointer;
  font-style: normal;
  font-size: inherit;
}

.music-play i {
  color: white;
  padding: 0 7px 0 8px;
  text-indent: .3rem;
  background-position: 0 -387px;
  line-height: 31px;
}

.play .music-play {
  background-position: right -428px;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
  width: 66px;
  height: 31px;
}

.play > a {
  background: url("../../../../assets/images/button2.png");
}

.play {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
  margin-right: -10px;
  height: 31px;
  flex-wrap: wrap;
}

/*play*/
.user > span {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}


/**/
.username a {
  font-size: 12px;
  color: #0c73c2;
  white-space: nowrap;
}

.username {
  display: flex;
  align-items: center;
}

.end .userpic {
  margin-right: 10px;
  width: 35px;
  height: 35px;
}

.userpic img {
  width: 35px;
  height: 35px;
}

.end .user {
  margin: 0 0 20px;
  line-height: 35px;
  display: flex;
  position: relative;
  align-items: center;
}

/**/
.title .tit {
  margin-left: 10px;
}

.title .tit > h2 {
  line-height: 24px;
  font-size: 20px;
  word-break: break-word;
  white-space: normal;
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
  font-weight: lighter;
}

.end .title i {
  width: 54px;
  height: 24px;
  background: url("../../../../assets/images/icon.png") 0 -243px;
}

.end .title {
  margin: 0 0 12px;
  width: 100%;
  display: flex;
}

.end {
  width: 410px;
  margin-left: 20px;
}

/* 主题上部分右边*/

.left-top .vip {
  border: none;
  width: 13px;
  margin-left: 5px;
}


.left-top .img img {
  width: 200px;
  height: 200px;
  padding: 2px;
}

.left-top {
  width: 100%;
  display: flex;
  margin-left: 30px;
}

/*<!--左边部分-->*/

.left {
  width: 100%;
  z-index: 2;
  margin-top: 47px;
}

.right {
  width: 270px;
  height: 100px;
}

.container {
  min-height: 700px;
  _height: 700px;
  margin: 0 auto;
  display: flex;
  background: url("../../../../assets/images/wrap4.png");
}

a {
  font-size: 12px;
}

.time {
}

.songss a {
  color: #333;
}
</style>